<template>
  <div class="home">
    <Swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide
        ><img
          class="s-img"
          src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/152706/3/11102/98388/5fe2b14aE55fc384c/64604b4ea3d38421.jpg!q70.jpg.dpg"
      /></swiper-slide>
      <swiper-slide
        ><img
          class="s-img"
          src="https://m.360buyimg.com/mobilecms/s700x280_jfs/t1/129738/34/20439/146582/5fdc5b77Ed027813b/88278894f0faaaea.jpg!q70.jpg.dpg"
      /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </Swiper>
    <div class="categories">
      <div class="item" v-for="i in categories" :key="i._id">
        <router-link :to="{ name: 'Hot', query: { id: i._id } }">
          <img :src="i.coverImg" :alt="i.name" />
        </router-link>
        <span>{{ i.name }}</span>
      </div>
      <div class="item-1"></div>
      <div class="item-1"></div>
      <div class="item-1"></div>
      <div class="item-1"></div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import axios from "axios";
import "swiper/css/swiper.css";

export default {
  name: "Home",
  data() {
    return {
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        loop: true,
        autoplay: true,
      },
      categories: [],
    };
  },
  created() {
    axios
      .get("http://api.cat-shop.penkuoer.com/api/v1/product_categories")
      .then((res) => {
        // console.log(res.data);
        this.categories = res.data.categories;
      });
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  components: {
    Swiper,
    SwiperSlide,
  },
};
</script>

<style scoped>
.s-img {
  width: 100%;
}
.categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
.categories .item {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ccc;
}
.categories .item img {
  width: 80%;
  max-height: 120px;
  border-radius: 50%;
}
.item-1 {
  width: 120px;
  height: 0;
}
</style>
